<template>
  <div class="left-container">
    <h2>Left</h2>
    <p>{{ uname }}</p>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from "@/components/ArtList.vue";
export default {
  data() {
    return {
      uname: "mxy",
    };
  },
  components: {
    ArtList,
  },
  beforeCreate() {
    console.log("beforeCreate", this.uname);
  },
  created() {
    console.log("created", this.uname);
  },
  beforeMount() {
    console.log("beforeMount", document.querySelector("p"));
  },
  mounted() {
    console.log("mounted", document.querySelector("p"));
  },
};
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>
